<div class="panel panel-default">
    <div class="panel-heading">
        搜索条件
    </div>
    <div class="panel-body">
        <div class="form-group">
            <div class="row">
                <div class="col-md-2">课程代码:</div>
                <div class="col-md-2">
                        <input type="text" name="CourseCode" id="CourseCode"
                               class="form-control">
                </div>
                <div class="col-md-2">课程名称:</div>
                <div class="col-md-2">
                        <input type="text" name="CourseName" id="CourseName"
                               class="form-control">
                </div>
                <div class="col-md-1">是否有试听:</div>
                <div class="col-md-3">
                    <div class="row">
                        <div class="col-md-6">
                            <select name="IsHasDemo" id="IsHasDemo" class="form-control">
                                <option value="">全部</option>
                                <option value="1">有</option>
                                <option value="0">无</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <input type="button" value="搜索" class="btn btn-info" id="btnSearch">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-body">
        <table id="list" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>课程代码</th>
                <th>课程名称</th>
                <th>课程地址</th>
                <th>试听地址</th>
                <th>学时</th>
                <th>学费</th>
                <th>开放选课</th>
                <th>SCORM课程</th>
                <th></th>
            </tr>
            </thead>

            <tbody>

            </tbody>
        </table>
    </div>
</div>

<script>
    $(function () {

        $('#list').dataTable({
            "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]], //分页控制
            "pageLength": 10,//首次加载的数据条数
            "order": [[2, "desc"]],   //默认排序
            "createdRow": function (row, data, index) {
                //row 行对象,data 数据对象,index行索引
                if (data['isopenselection'] == 1) {
                    $('td', row).eq(6).css('font-weight', "bold");
                }
                if (data['isscormcourse'] == 1) {
                    $('td', row).eq(7).css('font-weight', "bold");
                }
            },
            "dom": '<"top"l>rt<"bottom"ip><"clear">',
            "columnDefs": [
                // 增加一列，包括删除和修改，同时将需要传递的数据传递到链接中
                {
                    "targets": [8], // 目标列位置，下标从0开始
                    "searchable": false,
                    "orderable": false,
                    "data": "id", // 数据列名
                    "render": function (data, type, full) { // 返回自定义内容
                        return "<div class=\"btn-group\">" +
                                "<button type=\"button\" class=\"btn btn-gray dropdown-toggle\" data-toggle=\"dropdown\">" +
                                "操作 <span class=\"caret\"></span>" +
                                "</button>" +
                                "<ul class=\"dropdown-menu\" role=\"menu\">" +
                                "<li>" +
                                "<a href='{:U('Add','','')}?id=" + data + "'>编辑</a>" +
                                "</li>" +
                                "<li>" +
                                "<a onclick='return confirm(\"你确认要删除么？\");' href='{:U('delete','','')}?id=" + data + "'>删除</a>" +
                                "</li>" +
                                "</ul>" +
                                "</div>";
                    }
                }
            ],
            "language": {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 条记录",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 条记录，共 _TOTAL_ 条",
                "sInfoEmpty": "显示第 0 至 0 条记录，共 0 条",
                "sInfoFiltered": "(由 _MAX_ 条结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
            "processing": true,//分页，取数据等等的都放到服务端去
            "serverSide": true,//载入数据的时候是否显示“载入中”
            "columns": [
                {"data": "coursecode"},
                {"data": "coursename"},
                {"data": "courseurl"},
                {"data": "democourseurl"},
                {"data": "coursehours"},
                {"data": "coursefee"},
                {"data": "IsOpenSectionDesc"},
                {"data": "IsSCORMCourseDesc"},
                {"width": "10%"}
            ],
            "ajax": {
                "url": "{:U('Course/GetData','','')}",
                "type": "post"
            },
        });

        //搜索按钮
        $("#btnSearch").on('click', function () {
            var courseName = $("#CourseName").val();
            var courseCode = $("#CourseCode").val();
            var isHasDemo = $("#IsHasDemo").val();

            $('#list').DataTable().column(0).search(courseCode)
                    .column(1).search(courseName)
                    .column(3).search(isHasDemo).draw();
        });
    });
</script>